<template>
  <div>
    <div class="servicepoint">
      <xh-chart-pie :isLight="true" :option="pieoption" />
    </div>
    <div class="servicepoint point-right">
      <table class="table-detail">
        <tbody>
        <tr>
          <td>
                    <span
                        class="dot"
                        style="background: rgb(1, 180, 210)"
                    ></span
                    ><span>松陵街道</span>
          </td>
          <td>
            <span>1042</span>
          </td>
          <td>
            <span>59.89%</span>
          </td>
        </tr>
        <tr>
          <td>
                    <span
                        class="dot"
                        style="background: rgb(255, 180, 8)"
                    ></span
                    ><span>黎里镇</span>
          </td>
          <td>
            <span>90</span>
          </td>
          <td>
            <span>5.17%</span>
          </td>
        </tr>
        <tr>
          <td>
                    <span
                        class="dot"
                        style="background: rgb(151, 2, 254)"
                    ></span
                    ><span>七都镇</span>
          </td>
          <td>
            <span>160</span>
          </td>
          <td>
            <span>9.20%</span>
          </td>
        </tr>
        <tr>
          <td>
                    <span
                        class="dot"
                        style="background: rgb(0, 189, 141)"
                    ></span
                    ><span>江陵街道</span>
          </td>
          <td>
            <span>30</span>
          </td>
          <td>
            <span>1.72%</span>
          </td>
        </tr>
        <tr>
          <td>
                    <span class="dot" style="background: rgb(217, 0, 81)"></span
                    ><span>同里镇</span>
          </td>
          <td>
            <span>220</span>
          </td>
          <td>
            <span>12.64%</span>
          </td>
        </tr>
        <tr>
          <td>
                    <span
                        class="dot"
                        style="background: rgb(255, 53, 154)"
                    ></span
                    ><span>桃源镇</span>
          </td>
          <td>
            <span>0</span>
          </td>
          <td>
            <span>0.00%</span>
          </td>
        </tr>
        <tr>
          <td>
                    <span class="dot" style="background: rgb(247, 80, 0)"></span
                    ><span>八坼街道</span>
          </td>
          <td>
            <span>0</span>
          </td>
          <td>
            <span>0.00%</span>
          </td>
        </tr>
        <tr>
          <td>
                    <span
                        class="dot"
                        style="background: rgb(2, 247, 142)"
                    ></span
                    ><span>平望镇</span>
          </td>
          <td>
            <span>120</span>
          </td>
          <td>
            <span>6.90%</span>
          </td>
        </tr>
        <tr>
          <td>
                    <span
                        class="dot"
                        style="background: rgb(1, 180, 210)"
                    ></span
                    ><span>震泽镇</span>
          </td>
          <td>
            <span>0</span>
          </td>
          <td>
            <span>0.00%</span>
          </td>
        </tr>
        <tr>
          <td>
                    <span
                        class="dot"
                        style="background: rgb(255, 180, 8)"
                    ></span
                    ><span>横扇街道</span>
          </td>
          <td>
            <span>0</span>
          </td>
          <td>
            <span>0.00%</span>
          </td>
        </tr>
        <tr>
          <td>
                    <span
                        class="dot"
                        style="background: rgb(151, 2, 254)"
                    ></span
                    ><span>盛泽镇</span>
          </td>
          <td>
            <span>78</span>
          </td>
          <td>
            <span>4.48%</span>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <div style="clear: both"></div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.servicepoint {
  width: 50%;
  height: 236px;
  float: left;
}
.point-right {
  margin-top: -24px;
  overflow: hidden;
  height: auto;
}

.table-detail {
  text-align: left;
  width: 100%;
}
</style>